<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<title>其他运营指标</title>
	<script src="js/jquery.js" type="text/javascript"></script>
	<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.16.9/xlsx.full.min.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script> -->
	<link href="./css/comon0.css" rel="stylesheet" type="text/css">
	<!-- <link href="./css/index.css" rel="stylesheet" type="text/css"> -->
	<link href="./css/otherOperIndex.css" rel="stylesheet" type="text/css">
	<link href="./css/common.css" rel="stylesheet" type="text/css">
	<link href="./css/swiper.min.css" rel="stylesheet" type="text/css">
	<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
	<link href="./css/index2.css" rel="stylesheet" type="text/css">

</head>
<script>
	$(window).load(function () {
		$(".loading").fadeOut()
	})

	/****/
	$(document).ready(function () {
		var whei = $(window).width()
		$("html").css({
			fontSize: whei / 20
		})
		$(window).resize(function () {
			var whei = $(window).width()
			$("html").css({
				fontSize: whei / 20
			})
		});
	});
</script>

<script src="js/axios.js"></script>
<script src="js/vue.js"></script>
<script src="js/element.js"></script>
<script src="js/echarts.js"></script>
<script src="js/echarts-liquidfill.js"></script>
<script src="js/qs.js"></script>
<script src="js/swiper.js"></script>
<script src="js/FileSaver.min.js"></script>
<script src="js/xlsx.full.min.js"></script>

<!-- 2. 引入样式 -->
<link href="js/elementIndex.css" rel="stylesheet">

<body>
	<div class="loading">
		<div class="loadbox"><img src="picture/loading.gif"> 页面加载中...</div>
	</div>


	<div class="mainbox2" id="app">
		<div class="loadbox2" v-show="isShowLoading"><img src="picture/loading.gif">&nbsp;正在导出...</div>
		<!-- 顶部按钮 -->
		<div class="top-button">
			<!-- <div class="top-button-area" :class="{ nowselected: nowselect === 'today' }"
					@click="selectButton('today')">
					今日
				</div>
				<div class="top-button-area" :class="{ nowselected: nowselect === 'yesterday' }"
					@click="selectButton('yesterday')">
					昨日
				</div> -->

			<div class="left-top-DatePicker">
				<el-date-picker popper-class="elDatePicker" v-model="valueDate" type="date" placeholder="选择日期"
					:clearable="false" value-format="yyyy-MM-dd" :picker-options="pickerOptions1"
					@change="changeSelectDate" ref="datePicker1">
				</el-date-picker>
			</div>
		</div>
		<!-- <div class="right-top-export" style="display: none;" @click="onDatePicker"> -->
		<div class="right-top-export" @click="onDatePicker">
			<img class="export-img" src="images/export.png" />
			<div class="export-text">导出</div>
		</div>

		<!-- 右上角导出日期选择 -->
		<div class="right-top-export-box" v-show="showCalendar">
			<div class="DatePicker-content" style="background-color: #27282F;">
				<div class="text-style1">选择时间范围</div>
				<div style="display: flex; justify-content: space-between;">
					<div class="right-top-DatePicker">
						<el-date-picker popper-class="elDatesPicker" ref="daterange" v-model="valueDates"
							value-format="yyyy-MM-dd" unlink-panels type="daterange" @change="chooseDate"
							:picker-options="pickerOptions2" range-separator="至" start-placeholder=""
							end-placeholder="">
						</el-date-picker>
					</div>
					<div class="toExport" @click="toexport">
						确认导出
					</div>
				</div>


			</div>
			<div class="DatePicker-click" @click="offDatePicker">
				<img class="qx-icon" src="images/quxiao.png">
			</div>
		</div>


		<ul class="clearfix">
			<!-- 上 手术间使用率 -->
			<div class="box4" style="height:3.0rem; position: relative;">
				<div class="box-head">
					<span class="box-head-title-y1" style="margin-left: .2rem;">
						手术间使用率
					</span>
				</div>
				<div style="width: 5%; float: left;"></div>
				<div style="width: 10%; float: left;">
					<div style="width: 100%;height: 80%;">
						<div id="opRoomUsageRateWaterPolo" style="height: 2.1rem;"></div>
					</div>
				</div>

				<!-- <div style="width: 90%; float: left;" v-if="operatingRoomUtilizationRate.yData.length > 0"> -->
				<div style="width: 90%; float: left;">
					<div style="width: 100%;height: 100%;">
						<div ref="opRoomUsageRate1" style="height: 2.4rem"></div>
					</div>
				</div>
				<!-- <div v-else style="width: 90%; height: 100%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: .3rem;">
						暂无数据
					</div> -->
			</div>

			<!-- 中 等待时长 -->
			<li style="display: flex; justify-content: space-between;">
				<!-- 患者等待时长 -->
				<div class="box3-1" :class="{ nowselectedTable: nowSelectTable === 'averageWaitingPatientsTable' }"
					@click="selectShowTable('averageWaitingPatientsTable')">
					<div class="box-head">
						<span class="box-head-title">
							患者等待时长
						</span>
						<span class="box-head-title-y3">
							平均{{averageWaitingPatientsTime}}´
						</span>
					</div>
					<div>
						<div ref="averageWaitingTimeForPatientsChart" style="height: 2.8rem;width:4.7rem;"></div>
					</div>

				</div>
				<!-- 连台衔接时长 -->
				<div class="box3-1" :class="{ nowselectedTable: nowSelectTable === 'connectionAverageTimeTable' }"
					@click="selectShowTable('connectionAverageTimeTable')">
					<div class="box-head">
						<span class="box-head-title">
							连台衔接时长
						</span>
						<span class="box-head-title-y3">
							平均{{connectionAverageTime}}´
						</span>
					</div>
					<div>
						<div ref="connectionAverageTimeChart" style="height: 2.8rem;width:4.7rem;"></div>

					</div>

				</div>
				<!--  麻醉衔接时长 -->
				<div class="box3-1"
					:class="{ nowselectedTable: nowSelectTable === 'averageAnesthesiaTransitionTimeTable' }"
					@click="selectShowTable('averageAnesthesiaTransitionTimeTable')">
					<div class="box-head">
						<span class="box-head-title">
							麻醉衔接时长
						</span>
						<span class="box-head-title-y3">
							平均{{averageAnesthesiaTransitionTime}}´
						</span>
					</div>
					<div>
						<div ref="averageTimeOfAnesthesiaTransitionChart" style="height: 2.8rem;width:4.7rem;">
						</div>

					</div>

				</div>
				<!-- 手术衔接时长 -->
				<div class="box3-1"
					:class="{ nowselectedTable: nowSelectTable === 'SurgicalConnectionAverageTimeTable' }"
					@click="selectShowTable('SurgicalConnectionAverageTimeTable')">
					<div class="box-head">
						<span class="box-head-title">
							手术衔接时长
						</span>
						<span class="box-head-title-y3">
							平均{{SurgicalConnectionAverageTime}}´
						</span>
					</div>
					<div>
						<div ref="averageTimeOfSurgicalConnectionChart" style="height: 2.8rem;width:4.7rem;"></div>

					</div>

				</div>

			</li>

			<!-- 下 衔接时长 列表统计信息 -->
			<div class="down-table-content">

				<el-table ref="table" :key="tableKey" :data="currentTableData" height="3.27rem"
					:default-sort="{prop: 'intTime', order: 'descending'}" style="
							width: 100%;
							overflow: auto; 
							border-radius: 10px 10px 10px 10px;
							border: .01rem solid #3C4254;
							background-color: #000;
						" header-row-class-name="elHeaderClass" header-cell-class-name="elHeaderCellClass" row-class-name="columnClass"
					:row-class-name="tableRowClassName" :header-row-style="{height:'0.54rem'}"
					:header-cell-style="{padding:'0px'}" :row-style="{height:'0.54rem'}" :cell-style="cellStyle"
					cell-class-name="columnClass">
					<!-- 
							:data="currentTableData.slice(0, 5)" 
							height: 0px;
							:span-method="cellMerge"
							fixed
						 -->

					<template slot="empty">
						<div v-if="currentTableData === averageWaitingPatientsTable">
							<div v-if="averageWaitingPatientsTableIsData"
								style="display: flex; align-items: center; justify-content: center;">
								<img src="picture/loading.gif" style="width: .4rem; height: .4rem;">
								<span>&ensp;数据加载中...</span>
							</div>

							<span v-else>暂无数据</span>
						</div>

						<div v-else-if="currentTableData === connectionAverageTimeTable">
							<div v-if="connectionAverageTimeTableIsData"
								style="display: flex; align-items: center; justify-content: center;">
								<img src="picture/loading.gif" style="width: .4rem; height: .4rem;">
								<span>&ensp;数据加载中...</span>
							</div>

							<span v-else>暂无数据</span>
						</div>

						<div v-else-if="currentTableData === averageAnesthesiaTransitionTimeTable">
							<div v-if="averageAnesthesiaTransitionTimeTableIsData"
								style="display: flex; align-items: center; justify-content: center;">
								<img src="picture/loading.gif" style="width: .4rem; height: .4rem;">
								<span>&ensp;数据加载中...</span>
							</div>

							<span v-else>暂无数据</span>
						</div>

						<div v-else-if="currentTableData === SurgicalConnectionAverageTimeTable">
							<div v-if="SurgicalConnectionAverageTimeTableIsData"
								style="display: flex; align-items: center; justify-content: center;">
								<img src="picture/loading.gif" style="width: .4rem; height: .4rem;">
								<span>&ensp;数据加载中...</span>
							</div>

							<span v-else>暂无数据</span>
						</div>


					</template>

					<el-table-column prop="intTime" :label="getColumnLabel('intTime')" align="center" min-width="7%"
						:sortable="true" :formatter="defaultFormatter">
						<!-- 衔接时长 -->
						<template #default="{ row }">
							<span>{{ row.intTime + "'" }}</span>
						</template>
					</el-table-column>
					<el-table-column prop="operDate" label="手术日期" align="center" min-width="6%"
						:formatter="defaultFormatter">
						<template #default="{ row }">
							<div style="white-space: nowrap;">
								{{ row.operDate }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="departmentName" label="科室" align="center" min-width="5%"
						:show-overflow-tooltip="true" :formatter="defaultFormatter"></el-table-column>
					<el-table-column prop="roomName" label="手术间" align="center" min-width="5%"
						:formatter="defaultFormatter"></el-table-column>
					<el-table-column prop="sequence" label="台次" align="center" min-width="4%"
						:formatter="defaultFormatter"></el-table-column>
					<el-table-column prop="opName" label="手术名称" align="center" min-width="11%"
						:show-overflow-tooltip="true" :formatter="defaultFormatter">
						<template #default="{ row }">
							<!-- 通过内容字数判断需不需要轮播展示 同 outoftime.html -->
							<div :class="{'scrolling-content': (row.opName || '').length > 11}">
								{{ row.opName }}
							</div>
						</template>
					</el-table-column>
					<el-table-column prop="knifeName" label="主刀医生" align="center" min-width="5%"
						:show-overflow-tooltip="true" :formatter="defaultFormatter">
						<!-- <template #default="{ row }">
								<div :class="{'scrolling-content': (row.knifeName || '').length > 5}">
									{{ row.knifeName }}
								</div>
							</template> -->
					</el-table-column>
					<el-table-column prop="inpatientNumber" label="住院号" align="center" min-width="5%"
						:show-overflow-tooltip="true" :formatter="defaultFormatter">
						<!-- <template #default="{ row }">
								<div :class="{'scrolling-content': (row.caseSerialNumber || '').length > 8}">
									{{ row.caseSerialNumber }}
								</div>
							</template> -->
					</el-table-column>
					<el-table-column prop="patientName" label="患者姓名" align="center" min-width="5%"
						:show-overflow-tooltip="true" :formatter="defaultFormatter">
						<!-- <template #default="{ row }">
								<div :class="{'scrolling-content': (row.patientName || '').length > 6}">
									{{ row.patientName }}
								</div>
							</template> -->
					</el-table-column>

					<el-table-column prop="inBufferTime" label="患者到达" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span v-if="currentTableData === averageWaitingPatientsTable" style="color: #00E4FF;">
								患者到达
							</span>
							<span v-else>患者到达</span>
						</template>
					</el-table-column>


					<!-- <el-table-column prop="previousOutRoom" v-if="currentTableData === connectionAverageTimeTable" -->
					<el-table-column prop="previousOutRoom" v-if="nowSelectTable === 'connectionAverageTimeTable'"
						align="center" min-width="5%" :formatter="defaultFormatter">
						<template #header>
							<span style="color: #00E4FF;">上台出室</span>
						</template>

					</el-table-column>

					<el-table-column prop="inRoomTime" label="入手术室" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span
								v-if="currentTableData === averageWaitingPatientsTable || currentTableData === connectionAverageTimeTable "
								style="color: #00E4FF;">
								入手术室
							</span>
							<span v-else>入手术室</span>
						</template>
					</el-table-column>
					<el-table-column prop="previousOutRoom"
						v-if="currentTableData === averageAnesthesiaTransitionTimeTable" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span style="color: #00E4FF;">上台出室</span>
						</template>
					</el-table-column>

					<el-table-column prop="anStartTime" label="麻醉开始" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span v-if="currentTableData === averageAnesthesiaTransitionTimeTable "
								style="color: #00E4FF;">
								麻醉开始
							</span>
							<span v-else>麻醉开始</span>
						</template>
					</el-table-column>
					<el-table-column prop="previousOutRoom"
						v-if="currentTableData === SurgicalConnectionAverageTimeTable" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span style="color: #00E4FF;">上台结束</span>
						</template>
					</el-table-column>

					<el-table-column prop="operStartTime" label="手术开始" align="center" min-width="5%"
						:formatter="defaultFormatter">
						<template #header>
							<span v-if="currentTableData === SurgicalConnectionAverageTimeTable "
								style="color: #00E4FF;">
								手术开始
							</span>
							<span v-else>手术开始</span>
						</template>
					</el-table-column>

					<el-table-column prop="operEndTime" label="手术结束" align="center" min-width="5%"
						:formatter="defaultFormatter"></el-table-column>

					<el-table-column prop="anEndTime" label="麻醉结束" align="center" min-width="5%"
						:formatter="defaultFormatter"></el-table-column>

					<el-table-column prop="outRoomTime" label="出手术室" align="center" min-width="5%"
						:formatter="defaultFormatter"></el-table-column>

					<el-table-column prop="inPACUTime" label="入PACU" align="center" min-width="5%"
						:formatter="defaultFormatter"></el-table-column>

					<el-table-column prop="outPACUTime" label="出PACU" align="center" min-width="5%"
						:formatter="defaultFormatter">

					</el-table-column>

				</el-table>
			</div>

			<!-- 右下角 返回按钮 -->
			<div class="icon-container" @click="toindex">
				<img src="images/return-icon.png" alt="Icon" class="icon">
			</div>
		</ul>
	</div>

	<script type="text/javascript">

		let globalHospitalSwitch = '';
		new Vue({

			el: '#app',
			data: function () {
				return {
					isHide: this.getQueryString("isHide") != null ? this.getQueryString('isHide') :
						"0", //是否隐藏医生名字
					// nowDate: '',
					// nowTime: '',
					surgicalNumber: this.getQueryString("surgicalNumber") != null ? this.getQueryString(
						'surgicalNumber') : "001",
					surgicalNumberData: JSON.stringify({
						surgicalNumber: "001",
					}),

<<<<<<< HEAD
					hospitalSwitch: '005', //医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
=======
					hospitalSwitch: '003', //医院接口选择 000-测试  001-华山西院  002-深圳儿童 003-公网 004-华西 005-北京积水潭
>>>>>>> de3b0fe6ba8c0162c520d676deee41e3b698cada


					nowselect: "yesterday", // 今日 昨日状态切换
					valueDate: this.getYesterdayDate(), //查询的日期
					// 左上日历时间选择
					pickerOptions1: {
						firstDayOfWeek: 1, // 周一为每周的第一天
						disabledDate(time) {
							// 禁用今天及之后的日期
							return time.getTime() >= Date.now();
						}
					},
					// 右上日历时间选择
					valueDates: '',
					pickerOptions2: {
						firstDayOfWeek: 1, // 周一为每周的第一天
						disabledDate(time) {
							// 禁用今天及之后的日期
							return time.getTime() >= Date.now() - 8.64e7;
						}
					},


					httpUrl: "",
					showList1: false,
					showList12: false,
					showList3: false,
					showList4: false,
					showList5: false,

					hospitalNo: '!SZC',

					RoomRateIndex: 'parts1', //当前展示内容
					roomshow: true, //是否要获取折线图接口数据
					timer2: null, // 切换定时器
					autoSwitchInterval2: 10000, // 自动切换间隔时间，单位为毫秒

					operatingRoomToggleCount: 2, // 须展示的折线图的数量
					operatingRoomUtilizationRate: { // 展示的数据
						// yData: [],
						// xData: [],
						// yData1: [],
						// xData1: [],
					},

					caseUtilizationRateCaseRoomsValue: 0.5, // 水球图展示百分比数据

					earlyCount: 0,
					workDayLateStartCount: 0,
					workDayLateEndCount24: 0,
					workDayLateEndCount18: 0,
					holidayCount: 0,

					// 平均时长
					connectionAverageTime: '...',
					averageWaitingPatientsTime: '...',
					averageAnesthesiaTransitionTime: '...',
					SurgicalConnectionAverageTime: '...',
					// 柱状图
					connectionAverageTimeList: [],
					averageWaitingPatientsList: [],
					averageAnesthesiaTransitionTimeList: [],
					SurgicalConnectionAverageTimeList: [],


					AverageTime: 0,
					// ... 其他数据属性
					// timer: null,
					autoSwitchInterval: 5000, // 自动切换间隔时间，单位为毫秒
					// currentIndex: "1", // 当前显示的幻灯片索引

					// firstOpStartTimeDistributionList: [],

					yAxisMin: 0,
					yAxisMax1: 40, //连台
					yAxisMax2: 40, //患者
					yAxisMax3: 40, //麻醉
					yAxisMax4: 40, //手术

					tableKey: true,
					nowSelectTable: "averageWaitingPatientsTable",
					// 列表数据
					opRoomUsageRateTable: [], // 手术间使用率
					connectionAverageTimeTable: [], // 连台 
					averageWaitingPatientsTable: [], // 患者
					averageAnesthesiaTransitionTimeTable: [], // 麻醉
					SurgicalConnectionAverageTimeTable: [], // 手术

					connectionAverageTimeTableIsData: true,
					averageWaitingPatientsTableIsData: true,
					averageAnesthesiaTransitionTimeTableIsData: true,
					SurgicalConnectionAverageTimeTableIsData: true,

					infoOutputList: [], // 要导出的数据列表信息
					infoOutputListSZC: [], // 要导出的数据列表信息
					isShowLoading: false,
					showCalendar: false, // 时间段选择区域是否展示

					spanArr: [], // 需要合并的行数
					pos: 0, // 索引
					tableColorList: ["#FF548B", "#FFB545", "#0297FD", "#00E4FF", "#3AC9CE", "#4DEAAB"], // 第一列颜色值
					tableData: [],

				}
			},
			mounted() {

				this.init();

				const urlParams = new URLSearchParams(window.location.search);
				const surgicalNumberParam = urlParams.get('surgicalNumber');
				this.surgicalNumber = surgicalNumberParam ? surgicalNumberParam : '001'; // 获取路径参数中的 surgicalNumber

				this.getInterfaceInfo();
				this.getHospitalNo();
				// this.getSpanArr(this.tableData); //表格渲染

				//使用率数据查询 1小时
				setInterval(() => {
					this.getcaseUtilizationRateCaseRoomsSelectDate(); // 昨日手术间使用率 折线图
					this.getoverallUtilizationRateAllRoomsSelectDate(); //new 获取昨日全部手术间使用率 水球图post

				}, 1000 * 60 * 60)
				//平均时长查询 5分钟
				setInterval(() => {
					this.getDurationTimeDistribution() //各种时长分布
					this.dayContinuousConnectionTimeRangeCount(); //获取连台平均时长数据
					this.dayAnesthesiaConnectionTimeRangeCount(); //麻醉衔接平均时长数据
					this.dayPatientWaitingTimeRangeCount(); //获取患者等待平均时长数据
					this.dayOperationConnectionTimeRangeCount(); //获取手术室衔接平均时长数据

					this.dayPatientWaitingTimeRangeCountInfo(); // 患者等待时长下钻
					this.dayContinuousConnectionTimeRangeCountInfo(); // 连台衔接时长下钻分析
					this.dayAnesthesiaConnectionTimeRangeCountInfo(); // 麻醉衔接时长下钻分析
					this.dayOperationConnectionTimeRangeCountInfo(); // 手术衔接时长下钻分析

				}, 1000 * 60 * 5)

				setTimeout(() => {
					this.connectionAverageTimeChart(); //连台衔接平均时长
					this.averageWaitingTimeForPatientsChart(); //患者等待平均时长
					this.averageTimeOfAnesthesiaTransitionChart(); //麻醉衔接平均时长
					this.averageTimeOfSurgicalConnectionChart(); //手术衔接平均时长
					this.opRoomUsageRateWaterPolo();
					// this.initEcharts();
					this.opRoomUsageRate();

				}, 200);


				// 日期选择图标
				const keyNodeList = document.querySelectorAll('.el-date-editor');
				keyNodeList.forEach((element) => {
					// 创建一个 img 元素
					const imgNode = document.createElement('img');
					// 设置 img 的 src 属性为本地图片路径
					imgNode.setAttribute('src', 'images/calendar.png');
					// 设置 img 的样式
					imgNode.style.position = 'absolute';
					imgNode.style.top = '50%';
					imgNode.style.transform = 'translateY(-50%)';
					imgNode.style.right = '8px';
					imgNode.style.width = '0.19rem';
					imgNode.style.height = 'auto';
					// 将 img 添加到目标元素
					element.appendChild(imgNode);

					// 添加点击事件
					imgNode.addEventListener('click', () => {
						// 获取 el-date-picker 组件实例并调用 focus() 方法
						const datePicker = element.querySelector('input');
						if (datePicker) {
							datePicker.focus(); // 触发日期选择框打开
						}
					});
				});

			},


			computed: {
				// 根据 nowSelectTable 返回当前展示的数据
				currentTableData() {
					return this[this.nowSelectTable];
				},

			},

			methods: {


				init: function () {
					globalHospitalSwitch = this.hospitalSwitch;
					if (this.hospitalSwitch === "000") {

						this.httpUrl = "http://localhost:82"

					} else if (this.hospitalSwitch === "001") {

						this.httpUrl = "http://172.19.44.5"

					} else if (this.hospitalSwitch === "002") {

						this.httpUrl = "http://172.16.14.196:82"
						// this.httpUrl = "http://192.168.1.128:82"

					} else if (this.hospitalSwitch === "003") {

						this.httpUrl = "http://222.71.175.10:1111"

					} else if (this.hospitalSwitch === "004") {

						this.httpUrl = "http://172.29.1.16:80"

					} else if (this.hospitalSwitch === "005") {
						this.httpUrl = "http://222.71.175.10:1111"
					}

				},


				//获取接口信息汇总
				getInterfaceInfo() {
					this.getoverallUtilizationRateAllRoomsSelectDate(); //全部手术间使用率 水球图
					this.getcaseUtilizationRateCaseRoomsSelectDate(); // 各手术间使用率 折线图

					this.getDurationTimeDistribution(); //各种平均时长分布

					this.dayContinuousConnectionTimeRangeCount(); //获取连台平均时长数据
					this.dayAnesthesiaConnectionTimeRangeCount(); //麻醉衔接平均时长数据
					this.dayPatientWaitingTimeRangeCount(); //获取患者等待平均时长数据
					this.dayOperationConnectionTimeRangeCount(); //获取手术室衔接平均时长数据

					this.dayPatientWaitingTimeRangeCountInfo(); // 患者等待时长下钻
					this.dayContinuousConnectionTimeRangeCountInfo(); // 连台衔接时长下钻分析
					this.dayAnesthesiaConnectionTimeRangeCountInfo(); // 麻醉衔接时长下钻分析
					this.dayOperationConnectionTimeRangeCountInfo(); // 手术衔接时长下钻分析
				},

				// 显示加载提示
				showLoading() {
					$(".loading").fadeIn();
					console.log("+++显示加载中+++");
				},
				// 隐藏加载提示
				hideLoading() {
					$(".loading").fadeOut();
					console.log("+++隐藏加载中+++");
				},

				// 查询日期切换触发
				changeSelectDate() {
					this.showLoading();
					// this.nowselect = selected;
					// console.log("当前展示数据日: " + this.nowselect);
					console.log("当前展示数据日: " + this.valueDate);
					this.getInterfaceInfo();


					this.roomshow = true;
					this.opRoomUsageRate();

					this.connectionAverageTimeTable = []; // 连台
					this.averageWaitingPatientsTable = []; // 患者
					this.averageAnesthesiaTransitionTimeTable = []; // 麻醉
					this.SurgicalConnectionAverageTimeTable = []; // 手术

					this.connectionAverageTimeTableIsData = true;
					this.averageWaitingPatientsTableIsData = true;
					this.averageAnesthesiaTransitionTimeTableIsData = true;
					this.SurgicalConnectionAverageTimeTableIsData = true;

					// setTimeout(() => {
					this.hideLoading();
					// }, 3000);

				},

				// 获取昨天的日期 YYYY-MM-DD
				getYesterdayDate() {
					const today = new Date();
					const yesterday = new Date(today);
					yesterday.setDate(today.getDate() - 1);

					const year = yesterday.getFullYear();
					const month = String(yesterday.getMonth() + 1).padStart(2, '0');
					const day = String(yesterday.getDate()).padStart(2, '0');

					return `${year}-${month}-${day}`;
				},

				/**
				 * 导出操作
				 */
				// 打开日历
				onDatePicker() {
					this.showCalendar = true;
					this.$refs.daterange.focus(); // 让日历组件默认触发焦点事件
				},
				chooseDate() {
					this.$refs.daterange.focus(); // 选择日期后依旧触发焦点
				},

				// 导出
				toexport() {
					/*
					if( this.nowSelectTable === "averageWaitingPatientsTable" ) { //患者等待
						this.dayPatientWaitingTimeRangeCountInfoOutPut().then(() => this.generateSheet());
						
						
					} else if ( this.nowSelectTable === "connectionAverageTimeTable" ) { // 连台衔接
						this.dayContinuousConnectionTimeRangeCountInfoOutPut().then(() => this.generateSheet());
						
					} else if ( this.nowSelectTable === "averageAnesthesiaTransitionTimeTable" ) { // 麻醉衔接
						this.dayAnesthesiaConnectionTimeRangeCountInfoOutPut().then(() => this.generateSheet());
						
					} else if ( this.nowSelectTable === "SurgicalConnectionAverageTimeTable" ) { // 手术衔接
						this.dayOperationConnectionTimeRangeCountInfoOutPut().then(() => this.generateSheet());
						
					};
					*/
					const [dateBegin, dateEnd] = this.valueDates;
					if (this.hospitalNo === "SZC") {
						this.isShowLoading = true;
						this.exportDataTST(dateBegin, dateEnd)
							.then(() => {
								this.toExcel(dateBegin, dateEnd); // 导出 Excel
								this.isShowLoading = false; // 导出成功，隐藏加载图标
							})
							.catch(err => console.error('处理报错:', err));

					} else {
						this.outPutStatisticsInfo(dateBegin, dateEnd)
							.then(() => this.generateSheet())
							.catch(err => console.error('处理报错:', err));

						// this.generateSheet());

					}
					this.showCalendar = false;

				},
				//调用导出到excel
				generateSheet() {
					// 定义列映射
					var columnMap = [
						{ field: 'operDate', name: '手术日期' },
						{ field: 'opId', name: '手术唯一码' },
						{ field: 'departmentName', name: '科室名' },
						{ field: 'roomName', name: '房间名' },
						{ field: 'sequence', name: '台次' },
						{ field: 'opName', name: '手术名称' },
						{ field: 'operKind', name: '手术类型' },
						{ field: 'anMethod', name: '麻醉方式' },
						{ field: 'knifeDoctorName', name: '主刀医生姓名' },
						{ field: 'knifeDoctorHelperName', name: '主刀一助姓名' },
						{ field: 'firstWashNurseName', name: '第一洗手护士姓名' },
						{ field: 'firstCircuitNurse', name: '第一巡回护士姓名' },
						{ field: 'sickregion', name: '病区' },
						{ field: 'sickbedNo', name: '床号' },
						{ field: 'inpatientNumber', name: '住院号' },
						{ field: 'caseSerialNumber', name: '病案号(患者id)' },
						{ field: 'patientName', name: '患者名称' },
						{ field: 'sex', name: '性别' },
						{ field: 'age', name: '年龄' },
						{ field: 'inBufferTime', name: '入缓冲时间' },
						{ field: 'previousOutRoom', name: '上台出室' },
						{ field: 'inRoomTime', name: '入手术室时间' },
						{ field: 'anStartTime', name: '麻醉开始时间' },
						{ field: 'operStartTime', name: '手术开始时间' },
						{ field: 'operEndTime', name: '手术结束时间' },
						{ field: 'anEndTime', name: '麻醉结束时间' },
						{ field: 'outRoomTime', name: '出手术室时间' },
						{ field: 'inPACUTime', name: '入PACUT时间' },
						{ field: 'outPACUTime', name: '出PACUT时间' },
						{ field: 'intTimeWaitTime', name: '患者等待时长' },
						{ field: 'intTimeLtxjTime', name: ' 联台衔接时长' },
						{ field: 'intTimeMzxjTime', name: '麻醉衔接时长' },
						{ field: 'intTimeSsxjTime', name: '手术衔接时长' },
						{ field: 'surgicalNumber', name: '手术部编号' },

						// { field: 'createBy', name: 'createBy' },
						// { field: 'createDate', name: 'createDate' },
						// { field: 'id', name: 'id' },
						// { field: 'isNewRecord', name: 'isNewRecord' },
						// { field: 'updateBy', name: 'updateBy' },
						// { field: 'updateDate', name: 'updateDate' },

					];

					// 处理映射数据并生成工作表
					function processSheetData(data) {
						return data.map(item => {
							var dataItem = {};
							columnMap.forEach(col => {
								dataItem[col.name] = item[col.field] !== undefined ? item[col.field] : '';

								/*	if (item.timePointInfo && item.timePointInfo[col.field] !== undefined) {
										dataItem[col.name] = item.timePointInfo[col.field];
										
									} else if (item.operInfo && item.operInfo[col.field] !== undefined) {
										dataItem[col.name] = item.operInfo[col.field];
										
									} else if (item.patientInfo && item.patientInfo[col.field] !== undefined) {
										dataItem[col.name] = item.patientInfo[col.field];
										
									} else {
										dataItem[col.name.split('|')[1]] = '';
										
									}
								*/
							});
							return dataItem;
						});
					}

					var allData = processSheetData(this.infoOutputList);

					console.log("=====导出的数据列表=======");
					console.log(allData);

					// 创建一个工作簿
					var wb = XLSX.utils.book_new();

					// 创建工作表
					var ws = XLSX.utils.json_to_sheet(allData, { header: columnMap.map(col => col.name) });

					/*
					// 添加二级表头
					ws['!rows'] = [];
					ws['!cols'] = [];
					columnMap.forEach((col, index) => {
						var cell = ws[XLSX.utils.encode_cell({ r: 0, c: index })];
						if (cell) {
							cell.v = col.name.split('|')[1];
							cell.t = 's';
						}
						var headerCell = ws[XLSX.utils.encode_cell({ r: 1, c: index })];
						if (!headerCell) {
							headerCell = {};
						}
						headerCell.v = col.name.split('|')[0];
						headerCell.t = 's';
						ws[XLSX.utils.encode_cell({ r: 1, c: index })] = headerCell;
					});
				    
					// 合并第一行的特定列
					ws['!merges'] = [
						{ s: { r: 0, c: 0 }, e: { r: 0, c: 9 } }, // 1-10列合并
						{ s: { r: 0, c: 10 }, e: { r: 0, c: 21 } }, // 11-22列合并
						{ s: { r: 0, c: 22 }, e: { r: 0, c: 28 } } // 23-29列合并
					];
					*/

					// 将工作表添加到工作簿中
					XLSX.utils.book_append_sheet(wb, ws, 'CombinedData');

					// 生成Excel文件并下载
					var wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
					saveAs(new Blob([wbout], { type: "application/octet-stream" }), 'data.xlsx');

				},


				toExcel(dateBegin, dateEnd) {
					const data = this.infoOutputListSZC;

					// 设置 Excel 内容
					const sheetData = [
						['态势图统计数据'], // 标题
						[
							'手术总数', '计划首台数', '准点首台数', '首台换台数', '首台换台率', '首台总数',
							'新生儿数量', '婴幼儿数量', '高风险数量', '特殊感染数量', '一级手术数量',
							'二级手术数量', '三级手术数量', '四级手术数量', '急诊手术量', '择期手术量',
							'早开台手术量', '工作日18点未结束手术量', '工作日24点未结束手术量', '节假日手术量',
							'患者等待平均时长', '连台衔接平均时长', '麻醉衔接平均时长', '手术衔接平均时长', '平均结束时间'
						], // 字段名称
						[
							data.data1[0].operCount, // 手术总数
							data.data1[0].firstUnitCount, // 计划首台数
							data.data1[0].punctualityStart, // 准点首台数
							data.data7, // 首台换台数
							data.data8, // 首台换台率
							data.data9, // 首台总数
							data.data1[0].newBornCount, // 新生儿数量
							data.data1[0].infantCount, // 婴幼儿数量
							data.data1[0].highRiskAnesthesia, // 高风险数量
							data.data1[0].specialInfection, // 特殊感染数量
							data.data1[0].oneLevelCount, // 一级手术数量
							data.data1[0].twoLevelCount, // 二级手术数量
							data.data1[0].threeLevelCount, // 三级手术数量
							data.data1[0].fourLevelCount, // 四级手术数量
							data.data1[0].emergencyOperCount, // 急诊手术量
							data.data1[0].chooseOperCount, // 择期手术量
							data.data1[0].earlyOperCount, // 早开台手术量
							data.data1[0].eighteenOperCount, // 工作日18点未结束手术量
							data.data1[0].twentyFourOperCount, // 工作日24点未结束手术量
							data.data1[0].holidayOperCount, // 节假日手术量
							data.data2, // 患者等待平均时长
							data.data3, // 连台衔接平均时长
							data.data4, // 麻醉衔接平均时长
							data.data5, // 手术衔接平均时长
							data.data6 // 平均结束时间
						]
					];

					// 创建工作表
					const ws = XLSX.utils.aoa_to_sheet(sheetData);

					// 计算合并单元格的范围（第一行从第 0 列到字段名称列数 - 1）
					const mergeRange = { s: { r: 0, c: 0 }, e: { r: 0, c: sheetData[1].length - 1 } };
					ws['!merges'] = [mergeRange];

					// 设置标题样式（居中、字体变大加粗）
					const titleCellStyle = {
						alignment: { horizontal: 'center', vertical: 'center' }, // 水平和垂直居中
						font: { bold: true, sz: 20 }
					};
					const cellAddress = XLSX.utils.encode_cell({ r: 0, c: 0 }); // 合并后的标题单元格（A1）
					if (ws[cellAddress]) {
						ws[cellAddress].s = titleCellStyle;
					}

					// 自定义每个字段名称的列宽
					const columnWidths = [
						60, 60, 60, 60, 60, 60,
						80, 80, 80, 80, 80,
						80, 80, 80, 80, 90,
						100, 100, 100, 100,
						100, 100, 100, 100, 100
					];
					ws['!cols'] = columnWidths.map(width => ({ wpx: width }));

					// 设置字段样式（居中）
					const fieldCellStyle = {
						alignment: { horizontal: 'center' }
					};
					const fieldRow = 1;
					for (let col = 0; col < sheetData[1].length; col++) {
						const cellAddress = XLSX.utils.encode_cell({ r: fieldRow, c: col });
						if (ws[cellAddress]) {
							ws[cellAddress].s = fieldCellStyle;
						}
					}

					// 创建工作簿
					const wb = XLSX.utils.book_new();
					XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

					// 导出 Excel 文件
					XLSX.writeFile(wb, `${dateBegin}至${dateEnd}手术统计数据.xlsx`);
				},


				// 关闭日历
				offDatePicker() {
					this.showCalendar = false;
				},

				// 表格展示内容切换
				selectShowTable(selected) {
					this.nowSelectTable = selected;

					// this.$nextTick(() => {
					// 	this.$refs['table'].doLayout();
					// });
					this.tableKey = !this.tableKey;
				},

				changeRooms(index) {
					const mapping = {
						parts1: { xData: 'xData1', yData: 'yData1' },
						parts2: { xData: 'xData2', yData: 'yData2' },
						parts3: { xData: 'xData3', yData: 'yData3' },
						parts4: { xData: 'xData4', yData: 'yData4' },
						parts5: { xData: 'xData5', yData: 'yData5' },
					};

					const selected = mapping[index];
					if (selected) {
						this.operatingRoomUtilizationRate.xData = this.operatingRoomUtilizationRate[selected.xData];
						this.operatingRoomUtilizationRate.yData = this.operatingRoomUtilizationRate[selected.yData];
					}

					this.RoomRateIndex = index;
					// this.$refs.carousel.setActiveItem(index);
					// this.connectionAverageTimeChart();
					// this.initEcharts();
					this.opRoomUsageRate();

				},

				startAutoSwitch2() {
					// 清除之前的定时器
					if (this.timer2) {
						clearInterval(this.timer2);
					}

					const parts = Array.from({
						length: this.operatingRoomToggleCount
					}, (_, i) => `parts${i + 1}`);

					// 设置新的定时器
					this.timer2 = setInterval(() => {
						// this.RoomRateIndex = (this.RoomRateIndex === "parts1" ? "parts2" : (this
						// 	.RoomRateIndex === "parts2" ? "parts3" : (this.RoomRateIndex ===
						// 		"parts3" ? "parts4" : "parts1")));

						const currentIndex = parts.indexOf(this.RoomRateIndex);
						const nextIndex = (currentIndex + 1) % parts.length;
						this.RoomRateIndex = parts[nextIndex];

						this.changeRooms(this.RoomRateIndex);

					}, this.autoSwitchInterval2);
				},
				stopAutoSwitch2() {
					// 停止自动切换
					if (this.timer2) {
						clearInterval(this.timer2);
						this.timer2 = null;
					}
				},

				//获取医院编码
				getHospitalNo() {
					const url = this.httpUrl + '/oriot_op/api/screenrPlanB/getHospitalCode';
					axios.get(url).then(response => {
						if (response.data) {
							if (response.data.code == '1') {
								// this.showList1=true;
								this.hospitalNo = response.data.hospitalCode

							}
						}
					}).catch(err => {
						console.log('获取手术信息请求失败')

					})
				},

				getQueryString(name) {
					let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
					let r = window.location.search.substr(1).match(reg);
					if (r != null) {
						return unescape(r[2]);
					};
					return null;
				},

				fontSizeDraw(res) {
					let docEl = document.documentElement,
						clientWidth =
							window.innerWidth ||
							document.documentElement.clientWidth ||
							document.body.clientWidth;
					if (!clientWidth) return;
					// 此处的3840 为设计稿的宽度，记得修改！
					let fontSize = clientWidth / 3840;
					return res * fontSize;
				},

				// 上 手术间使用率

				//获取昨日全部手术间使用率 水球图接口 yyyy-MM-dd
				getoverallUtilizationRateAllRoomsSelectDate() {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/overallUtilizationRateAllRoomsSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(res) {
							console.log("+++++获取昨日全部手术间使用率++++++++" + self.nowselect);
							console.log(res);
							if (res.code == '1') {
								if (!(Object.keys(res.data).length === 0)) {
									let percent = parseFloat(res.data); // 先去掉百分号并转换为数字
									self.caseUtilizationRateCaseRoomsValue = percent / 100; // 转换为小数
									self.opRoomUsageRateWaterPolo();
								}


							}
						},
						error(err) {
							console.log('获取昨日全部手术间使用率信息请求失败')
						}
					})

				},

				//获取昨日各手术间使用率 折线图接口 yyyy-MM-dd
				getcaseUtilizationRateCaseRoomsSelectDate() {

					return new Promise((resolve, reject) => {

						const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/caseUtilizationRateCaseRoomsNew';
						let self = this;
						const requestData = {
							surgicalNumber: this.surgicalNumber,
							date: this.valueDate,
						};
						// this.operatingRoomUtilizationRate = {yData: [],xData: []};
						this.operatingRoomUtilizationRate = {};
						$.ajax({
							url,
							type: 'post',
							dataType: 'json',
							data: JSON.stringify(requestData),
							cache: false,
							// 告诉jQuery不要去处理发送的数据
							processData: false,
							// 告诉jQuery不要去设置Content-Type请求头
							contentType: false,
							success(res) {
								console.log("+++++ 各 手术间使用率++++++++" + self.nowselect);
								console.log(res.data);

								if (res.code == '1') {

									// self.operatingRoomUtilizationRate = {yData: [],xData: []};
									self.operatingRoomUtilizationRate = {};
									let combinedData = res.data; // 全部数据数组

									let groupedData = []; // 分组，每组包含20个元素
									for (let i = 0; i < combinedData.length; i += 20) {
										groupedData.push(combinedData.slice(i, i + 20));
									}
									console.log("+++++各手术间使用率分组数据:+++++" + self.nowselect);
									console.log(groupedData);

									self.operatingRoomToggleCount = groupedData.length;

									const utilizationNumber0List = [];
									const operRoomName0List = [];

									for (let i = 0; i < groupedData.length; i++) {
										let group = groupedData[i];
										let yDataKey = `yData${i + 1}`;
										let xDataKey = `xData${i + 1}`;

										const operRoomNames = group.map(item => item.operRoomName);

										group.forEach(item => {
											// 提取 utilizationRate，并去掉非数字字符
											let utilizationSrt = item.utilizationRate.replace(
												/[^0-9.-]/g, '');
											// 将字符串转换为数字
											let utilizationNumber = parseFloat(utilizationSrt);
											let operRoomName = item.operRoomName;

											// 将数据存储到相应的数组中
											self.operatingRoomUtilizationRate[yDataKey] = self
												.operatingRoomUtilizationRate[yDataKey] || [];
											self.operatingRoomUtilizationRate[xDataKey] = self
												.operatingRoomUtilizationRate[xDataKey] || [];

											self.operatingRoomUtilizationRate[yDataKey].push(
												utilizationNumber);
											self.operatingRoomUtilizationRate[xDataKey].push(
												operRoomName);

											if (i === 0) {
												self.operatingRoomUtilizationRate[`yData`] = self
													.operatingRoomUtilizationRate[`yData`] || [];
												self.operatingRoomUtilizationRate[`xData`] = self
													.operatingRoomUtilizationRate[`xData`] || [];

												self.operatingRoomUtilizationRate[`yData`].push(
													utilizationNumber);
												self.operatingRoomUtilizationRate[`xData`].push(
													operRoomName);
												// self.operatingRoomUtilizationRate.yData.push(utilizationNumber);
												// self.operatingRoomUtilizationRate.xData.push(operRoomName);
											}
										});

									};

									self.opRoomUsageRate();
									self.startAutoSwitch2(); // 昨日手术间使用率轮播	
									self.roomshow = false;

									console.log("==========this.operatingRoomUtilizationRate");
									console.log(self.operatingRoomUtilizationRate);
								}

							},
							error(err) {
								console.log('获取 各 手术间使用率信息请求失败')
							},

						})



					})
				},

				//水球图UI
				opRoomUsageRateWaterPolo() {
					var taicharts = echarts.init(document.getElementById('opRoomUsageRateWaterPolo'))
					// taicharts.clear();

					taicharts.setOption({
						title: {
							text: '全部手术间使用率',
							textStyle: {
								color: "#fdfdfd",
								fontSize: 12
							},
							left: 'center',
							bottom: '5 %'
						},
						series: [{
							name: '',
							type: 'liquidFill',
							radius: '60%', // 控制中间圆球的尺寸（此处可以理解为距离外圈圆的距离控制）
							data: [{
								value: this.caseUtilizationRateCaseRoomsValue,
								direction: 'right',
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
											[{
												offset: 0,
												color: 'rgba(112, 220, 134, 1)',

											},
											{
												offset: 1,
												color: 'rgba(1, 125, 211, 1)'
											}
											])

									},
								},
							}, {
								value: this.caseUtilizationRateCaseRoomsValue,
								direction: 'left',
								itemStyle: {
									normal: {
										color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
											[{
												offset: 0,
												color: 'rgba(72, 187, 165, 0.5)',

											},
											{
												offset: 1,
												color: 'rgba(11, 136, 207, 0.5)'
											}
											])

									},
								},
							},], // 这里填写要展示的百分比数据
							label: {
								fontSize: 22,
							},
							backgroundStyle: {
								borderWidth: 1,
								color: 'rgb(31,47,79)' // 球体本景色
							},
							amplitude: '5%', //波浪的振幅
							animationEasing: 'cubicInOut',
							waveLength: '120%',
							backgroundAnimation: true,
							itemStyle: {
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#3ae4d0'
								},
								{
									offset: 1,
									color: '#127798'
								}
								]),
								borderWidth: 1, // 边框宽度
								borderColor: '#58d7e2' // 边框颜色
							},
							outline: {
								show: false
							},
						},
						{
							type: 'pie',
							center: ['50%', '50%'],
							radius: ['62%', '63.5%'], // 控制外圈圆的粗细

							hoverAnimation: false,
							data: [{
								name: '',
								value: 500,
								labelLine: {
									show: false
								},
								itemStyle: {
									color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: 'rgba(0, 124, 211, 1)'
									},
									{
										offset: 1,
										color: 'rgba(58, 201, 206, 1)'
									}
									])
								},
								emphasis: {
									labelLine: {
										show: false
									},
									itemStyle: {
										color: '#00AFFF'
									}
								}
							}]
						},
						]

					});

					setTimeout(() => {
						taicharts.resize();
					}, 200);

					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								taicharts.resize()
							}, 100)
						},
						false,
					)
				},
				//折线图初始
				/*initEcharts() {
					const chartContainer = this.$refs.opRoomUsageRate1;
					this.echartsInstance = echarts.init(chartContainer);
					this.echartsInstance.clear();
					// this.echartsInstance.showLoading() // 显示
					
					this.opRoomUsageRate();
					// this.echartsInstance.hideLoading() // 隐藏
			  
				},
				*/
				// 折线图UI
				async opRoomUsageRate() {
					await this.$nextTick();
					const chartContainer = this.$refs.opRoomUsageRate1;

					this.echartsInstance = echarts.init(chartContainer);
					this.echartsInstance.showLoading({
						text: '加载中',
						color: '#e8d8d7',
						textColor: '#dfd6d6',
						maskColor: 'rgba(30, 31, 37, 1)',
						zlevel: 0,
					}); // 显示

					if (this.roomshow) {
						await this.getcaseUtilizationRateCaseRoomsSelectDate();
					}
					this.echartsInstance.clear();
					this.echartsInstance.hideLoading(); // 隐藏

					const seriesData = this.operatingRoomUtilizationRate.yData;
					const xAxisData = this.operatingRoomUtilizationRate.xData;

					this.echartsInstance.setOption({
						// graphic: {
						//     type: 'text',     // 类型：文本
						//     left: 'center',
						//     top: 'middle',
						//     silent: true,     // 不响应事件
						//     invisible: xAxisData.length > 0,   // 有数据就隐藏
						//     style: {
						//         fill: '#fff',
						//         text: '数据获取中...',
						//         fontSize: '0.25rem'
						//     }
						// },
						grid: {
							top: "22%",
							bottom: "10%",
							left: "1%",
							right: "2%",
							containLabel: true,
						},
						xAxis: {
							type: 'category',
							axisTick: {
								show: false // 不显示坐标轴刻度线
							},
							splitLine: {
								show: false // 不显示网格线
							},
							axisLine: {
								show: false
							},
							// data: this.overTimeListX,
							// data: ['神经科', '内科', '显微科', '外科', '骨科', '内脏科'],
							data: xAxisData,
							axisLabel: {
								fontSize: 10, // 设置横轴字体大小
								color: 'rgba(176, 184, 205, 1)'
							}
						},
						yAxis: {
							type: 'value',
							min: 0,
							// max: 300,
							// interval: 50,
							splitLine: { //分割线
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {
								textStyle: {
									fontSize: 12,
									color: 'rgba(176, 184, 205, 1)'
								},
								show: false,
								formatter: '{value}%' //设置单位为m
							}
						},
						series: [{
							name: "昨日手术间使用率",
							// data: [40 / 40 * 100, 32 / 40 * 100, 31 / 40 * 100, 28 / 40 * 100, 15 / 40 * 100, 35 / 40 * 100],
							// data: this.overTimeListY,
							data: seriesData,
							type: 'line',
							smooth: true, //平滑曲线
							lineStyle: {
								width: 6, // 设置曲线宽度
								color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: '#103499'
								},
								{
									offset: 1,
									color: '#50deea'
								}
								]),
							},
							itemStyle: {
								color: '#ffffff',
								borderColor: '#20679d', // 设置数据点边框颜色
								borderWidth: 8, // 设置数据点边框宽度
								backgroundColor: '#e4eaeb',
								borderType: "dashed",
							},
							symbol: "circle",
							symbolSize: 4, // 设置数据点大小
							areaStyle: { //对x轴投影
								normal: {
									opacity: 0.2,
									color: '#20679d'
								},
							},
							animationDelay(idx) {
								return idx * 10 + 100;
							},
							label: {
								show: true,
								position: 'top', // 标签位置在圆球上方
								// formatter: function (params) {
								//     return params.value; // 显示圆的数值
								// offset: [0, 10],
								padding: [3, 5], //内边距
								// lineHeight: 20,//行高
								formatter: '{c}%', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
								backgroundColor: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
									offset: 0,
									color: 'rgba(56, 103, 117, 1)'
								},
								{
									offset: 1,
									color: 'rgba(36, 77, 113, 1)'
								}
								]),
								borderRadius: 10,
								width: 25,
								height: 13,

							},
						},],
					});
					window.addEventListener("load", function () {
						this.echartsInstance.resize()

					});
					window.onload = function () {
						this.echartsInstance.resize()

					};

					setTimeout(() => {
						this.echartsInstance.resize();
					}, 200);

					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								this.echartsInstance.resize()
							}, 100)
						},
						false,
					);
					this.echartsInstance.hideLoading();

				},



				// 中 等待时长
				initAverageTime() {
					this.connectionAverageTimeChart()
					this.averageWaitingTimeForPatientsChart()
					this.averageTimeOfAnesthesiaTransitionChart()
					this.averageTimeOfSurgicalConnectionChart()
				},
				//平均时长信息获取
				getDurationTimeDistribution() {

					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/pushDurationTimeSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++手术平均时长分布+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.showList12 = true;
									let data = rep.data;
									self.averageWaitingPatientsTime = data.todayPatientWaitingTime; //患者等待时长
									self.connectionAverageTime = data.todayContinuousConnectionTime; //连台衔接时长
									self.averageAnesthesiaTransitionTime = data
										.todayAnesthesiaConnectionTime; //麻醉衔接时长
									self.SurgicalConnectionAverageTime = data
										.todayOperationConnectionTime; //手术衔接时长

								}
							}
						},
						error(rep) {
							console.log(rep + "手术平均时长分布详细信息获取失败");
						}
					});

				},

				//连台详细信息
				dayContinuousConnectionTimeRangeCount() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayContinuousConnectionTimeRangeCountSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++连台衔接平均时长详细信息+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.showList12 = true;
									let data = rep.data;

									self.connectionAverageTimeList = [data.zeroToFive, data.fiveToTen, data
										.tenToFifteen, data.fifteenToTwenty, data.twentyToTwentyFive,
									data.twentyFiveToThirty, data.ThirtyPlus
									]
									let num = Math.max(...self.connectionAverageTimeList);
									self.yAxisMax1 = Math.round(num / 10) * 10 + 10;
									// connectionAverageTimeList:[],
									//     averageWaitingPatientsList:[],
									//     averageAnesthesiaTransitionTimeList:[],
									//     SurgicalConnectionAverageTimeList:[],

								}
							}
							self.connectionAverageTimeChart();
						},
						error(rep) {
							console.log(rep + "连台衔接平均时长详细信息获取失败");
						}
					})
				},
				//患者等待详细信息
				dayPatientWaitingTimeRangeCount() {
					// 将 this.valueDate 从 yyyy-MM-dd 格式转换为 yyyy.MM.dd 格式
					// const formattedDate = this.valueDate.replace(/-/g, '.');

					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/dayPatientWaitingTimeRangeCountSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++患者等待平均时长详细信息+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.showList12 = true;
									let data = rep.data;

									self.averageWaitingPatientsList = [data.zeroToFive, data.fiveToTen, data
										.tenToFifteen, data.fifteenToTwenty, data.twentyToTwentyFive,
									data.twentyFiveToThirty, data.ThirtyPlus
									]
									let num = Math.max(...self.averageWaitingPatientsList);
									self.yAxisMax2 = Math.round(num / 10) * 10 + 10;
								}
							}
							if (globalHospitalSwitch === "005") {
								self.averageWaitingTimeForPatientsChartJST();

							} else {
								self.averageWaitingTimeForPatientsChart();
							}

						},
						error(rep) {
							console.log(rep + "患者等待平均时长详细信息获取失败");
						}
					})
				},
				//麻醉平均时长详细信息
				dayAnesthesiaConnectionTimeRangeCount() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayAnesthesiaConnectionTimeRangeCountSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++连台衔接平均时长详细信息+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.showList12 = true;
									let data = rep.data;

									self.averageAnesthesiaTransitionTimeList = [data.zeroToFive, data
										.fiveToTen, data.tenToFifteen, data.fifteenToTwenty, data
										.twentyToTwentyFive, data.twentyFiveToThirty, data.ThirtyPlus
									]
									let num = Math.max(...self.averageAnesthesiaTransitionTimeList);
									self.yAxisMax3 = Math.round(num / 10) * 10 + 10;

								}
							}
							self.averageTimeOfAnesthesiaTransitionChart();
						},
						error(rep) {
							console.log(rep + "连台衔接平均时长详细信息获取失败");
						}
					})
				},
				//手术衔接详细信息
				dayOperationConnectionTimeRangeCount() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayOperationConnectionTimeRangeCountSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++连台衔接平均时长详细信息+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.showList12 = true;
									let data = rep.data;

									self.SurgicalConnectionAverageTimeList = [data.zeroToFive, data
										.fiveToTen, data.tenToFifteen, data.fifteenToTwenty, data
										.twentyToTwentyFive, data.twentyFiveToThirty, data.ThirtyPlus
									]
									let num = Math.max(...self.SurgicalConnectionAverageTimeList);
									self.yAxisMax4 = Math.round(num / 10) * 10 + 10;
								}
							}
							self.averageTimeOfSurgicalConnectionChart();
						},
						error(rep) {
							console.log(rep + "连台衔接平均时长详细信息获取失败");
						}
					})
				},

				// -连台衔接时长UI
				connectionAverageTimeChart() {
					this.AverageTime = this.connectionAverageTime;

					const chartContainer = echarts.init(this.$refs.connectionAverageTimeChart);
					chartContainer.clear();
					chartContainer.setOption({
						grid: {
							top: "15%",
							bottom: "15%",
							left: "4%",
							right: "4%",
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							// data: ['0', '5', '10', '15', '20', '25', '30以上'],

							show: false,

						}, {
							type: 'category',
							data: ['0´', '5´', '10´', '15´', '20´', '25´', '30´+', ''],
							axisTick: {
								show: false, // 不显示坐标轴刻度线
								alignWithLabel: true
							},
							splitLine: {
								show: false, // 不显示网格线
							},
							axisLabel: {
								textStyle: {
									fontSize: 10,
									color: '#B0B8CD'
								},
								// formatter:'{value}´',
								// padding:[2,2,2,2] //x轴文字偏移
							},
							boundaryGap: false,

							position: 'bottom'
						}],

						yAxis: {
							type: 'value',
							// interval: 10,
							min: this.yAxisMin,
							max: this.yAxisMax1,
							boundaryGap: [0, '20%'],

							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {
								show: false,
								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
								formatter: '{value}台' //设置单位为m
							}
						},
						series: [{
							data: this.connectionAverageTimeList,
							// data: [11, 0, 32, 31, 28, 13, 22],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							barWidth: "100%",
							barMaxWidth: "30", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50
							barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
								// shadowColor: '#007CD3', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,


							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(0, 124, 211, 0)'
							},
							{
								offset: 1,
								color: 'rgba(0, 124, 211,0.7)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
							},


						},
						{
							data: [0, 0, 0, 0, 0, 0, 0],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							// barMaxWidth: "30", //设置每根柱条最大宽度为50
							// barMinHeight: "0", //设置每根柱条最小高度为50
							// barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: 'rgba(0, 124, 211,1)',
							label: {
								show: true, // 显示标签
								position: ['0%', -3],
								width: 30,
								height: 4,
								borderRadius: 0,
								color: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(0, 124, 211,1)',
								// shadowBlur: 6,
								// shadowColor: 'rgba(0, 124, 211,1)',
							},

						},
						]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},
				// -患者等待平均时长UI
				averageWaitingTimeForPatientsChartJST() {
					const chartContainer = echarts.init(this.$refs.averageWaitingTimeForPatientsChart);
					chartContainer.clear();

					chartContainer.setOption({

						grid: {
							top: "15%",
							bottom: "15%",
							left: "4%",
							right: "4%",
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							// data: ['0', '5', '10', '15', '20', '25', '30以上'],

							show: false,

						},
						{
							type: 'category',
							data: ['0´', '10´', '20´', '30´', '40´', '50´', '60´+', ''],
							axisTick: {
								show: false, // 不显示坐标轴刻度线
								alignWithLabel: true
							},
							splitLine: {
								show: false, // 不显示网格线
							},
							axisLabel: {
								textStyle: {
									fontSize: 10,
									color: '#B0B8CD'
								},
								// formatter:'{value}´',
								// padding:[2,2,2,2] //x轴文字偏移
							},
							boundaryGap: false,

							position: 'bottom'
						},
						],

						yAxis: {
							type: 'value',
							// interval: 10,
							min: this.yAxisMin,
							max: this.yAxisMax2,

							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {

								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
								show: false,
								formatter: '{value}台' //设置单位为m
							}
						},
						series: [{
							data: this.averageWaitingPatientsList,
							// data: [23, 40, 32,33, 22, 12, 23],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							barWidth: "100%",
							barMaxWidth: "30", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50
							barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
								// shadowColor: '#007CD3', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(48, 224, 161, 0)'
							},
							{
								offset: 1,
								color: 'rgba(48, 224, 161, 0.6)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
							},


						},
						{
							// data: this.overTimeListY,
							data: [0, 0, 0, 0, 0, 0, 0],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							// barMaxWidth: "30", //设置每根柱条最大宽度为50
							// barMinHeight: "0", //设置每根柱条最小高度为50
							// barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: 'rgba(48, 224, 161, 1)',
							label: {
								show: true, // 显示标签
								position: ['0%', -3],
								width: 30,
								height: 4,
								borderRadius: 0,
								color: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(48, 224, 161, 1)',
								// shadowBlur: 6,
								// shadowColor: 'rgba(48, 224, 161, 1)',
							},

						},
						]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},


				averageWaitingTimeForPatientsChart() {
					const chartContainer = echarts.init(this.$refs.averageWaitingTimeForPatientsChart);
					chartContainer.clear();

					chartContainer.setOption({

						grid: {
							top: "15%",
							bottom: "15%",
							left: "4%",
							right: "4%",
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							// data: ['0', '5', '10', '15', '20', '25', '30以上'],

							show: false,

						},
						{
							type: 'category',
							data: ['0´', '5´', '10´', '15´', '20´', '25´', '30´+', ''],
							axisTick: {
								show: false, // 不显示坐标轴刻度线
								alignWithLabel: true
							},
							splitLine: {
								show: false, // 不显示网格线
							},
							axisLabel: {
								textStyle: {
									fontSize: 10,
									color: '#B0B8CD'
								},
								// formatter:'{value}´',
								// padding:[2,2,2,2] //x轴文字偏移
							},
							boundaryGap: false,

							position: 'bottom'
						},
						],

						yAxis: {
							type: 'value',
							// interval: 10,
							min: this.yAxisMin,
							max: this.yAxisMax2,

							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {

								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
								show: false,
								formatter: '{value}台' //设置单位为m
							}
						},
						series: [{
							data: this.averageWaitingPatientsList,
							// data: [23, 40, 32,33, 22, 12, 23],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							barWidth: "100%",
							barMaxWidth: "30", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50
							barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
								// shadowColor: '#007CD3', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,
							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(48, 224, 161, 0)'
							},
							{
								offset: 1,
								color: 'rgba(48, 224, 161, 0.6)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
							},


						},
						{
							// data: this.overTimeListY,
							data: [0, 0, 0, 0, 0, 0, 0],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							// barMaxWidth: "30", //设置每根柱条最大宽度为50
							// barMinHeight: "0", //设置每根柱条最小高度为50
							// barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: 'rgba(48, 224, 161, 1)',
							label: {
								show: true, // 显示标签
								position: ['0%', -3],
								width: 30,
								height: 4,
								borderRadius: 0,
								color: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(48, 224, 161, 1)',
								// shadowBlur: 6,
								// shadowColor: 'rgba(48, 224, 161, 1)',
							},

						},
						]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},


				// -麻醉衔接平均时长UI
				averageTimeOfAnesthesiaTransitionChart() {
					const chartContainer = echarts.init(this.$refs.averageTimeOfAnesthesiaTransitionChart);
					chartContainer.clear();

					chartContainer.setOption({

						grid: {
							top: "15%",
							bottom: "15%",
							left: "4%",
							right: "4%",
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							// data: ['0', '5', '10', '15', '20', '25', '30以上'],

							show: false,

						}, {
							type: 'category',
							data: ['0´', '5´', '10´', '15´', '20´', '25´', '30´+', ''],
							axisTick: {
								show: false, // 不显示坐标轴刻度线
								alignWithLabel: true
							},
							splitLine: {
								show: false, // 不显示网格线
							},
							axisLabel: {
								textStyle: {
									fontSize: 10,
									color: '#B0B8CD'
								},
								// formatter:'{value}´',
								// padding:[2,2,2,2] //x轴文字偏移
							},
							boundaryGap: false,

							position: 'bottom'
						}],

						yAxis: {
							type: 'value',
							// interval: 10,
							min: this.yAxisMin,
							max: this.yAxisMax3,

							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {

								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
								show: false,
								formatter: '{value}台' //设置单位为m
							}
						},
						series: [{
							data: this.averageAnesthesiaTransitionTimeList,
							// data: [33, 30, 32,11, 11, 22, 11],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							barWidth: "100%",
							barMaxWidth: "30", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50
							barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
								// shadowColor: '#007CD3', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,


							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(58, 201, 206, 0)'
							},
							{
								offset: 1,
								color: 'rgba(58, 201, 206, 0.6)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
							},


						},
						{
							data: [0, 0, 0, 0, 0, 0, 0],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							// barMaxWidth: "30", //设置每根柱条最大宽度为50
							// barMinHeight: "0", //设置每根柱条最小高度为50
							// barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: 'rgba(58, 201, 206, 1)',
							label: {
								show: true, // 显示标签
								position: ['0%', -3],
								width: 30,
								height: 4,
								borderRadius: 0,
								color: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(58, 201, 206, 1)',
								// shadowBlur: 6,
								// shadowColor: 'rgba(58, 201, 206, 1)',
							},

						},
						]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},
				// -手术衔接平均时长UI
				averageTimeOfSurgicalConnectionChart() {
					const chartContainer = echarts.init(this.$refs.averageTimeOfSurgicalConnectionChart);
					chartContainer.clear();

					chartContainer.setOption({

						grid: {
							top: "15%",
							bottom: "15%",
							left: "4%",
							right: "4%",
							containLabel: true,
						},
						xAxis: [{
							type: 'category',
							// data: ['0', '5', '10', '15', '20', '25', '30以上'],

							show: false,

						}, {
							type: 'category',
							data: ['0´', '5´', '10´', '15´', '20´', '25´', '30´+', ''],
							axisTick: {
								show: false, // 不显示坐标轴刻度线
								alignWithLabel: true
							},
							splitLine: {
								show: false, // 不显示网格线
							},
							axisLabel: {
								textStyle: {
									fontSize: 10,
									color: '#B0B8CD'
								},
								// formatter:'{value}´',
								// padding:[2,2,2,2] //x轴文字偏移
							},
							boundaryGap: false,

							position: 'bottom'
						}],

						yAxis: {
							type: 'value',
							// interval: 10,
							min: this.yAxisMin,
							max: this.yAxisMax4,

							splitLine: {
								show: true,
								lineStyle: {
									type: 'dashed',
									color: '#282C38'
								},
							},
							axisLabel: {

								textStyle: {
									fontSize: 11,
									color: 'rgba(176, 184, 205, 1)'
								},
								show: false,
								formatter: '{value}台' //设置单位为m
							}
						},
						series: [{
							data: this.SurgicalConnectionAverageTimeList,
							// data: [13, 20, 32,30, 21, 12, 21],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							barWidth: "100%",
							barMaxWidth: "30", //设置每根柱条最大宽度为50
							barMinHeight: "0", //设置每根柱条最小高度为50
							barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
								// shadowColor: '#007CD3', //阴影
								// shadowBlur: 10,
								// shadowOffsetX: 2,
								// shadowOffsetY: 2,


							},
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: 'rgba(38, 212, 255, 0)'
							},
							{
								offset: 1,
								color: 'rgba(38, 212, 255, 0.6)'
							}
							]),
							label: {
								show: true, // 显示标签
								position: 'top', // 标签位置
								formatter: '{c}台', // 标签内容
								fontSize: 10,
								color: 'rgb(255,255,255,1)',
							},


						},
						{
							// data: this.overTimeListY,
							data: [0, 0, 0, 0, 0, 0, 0],
							// data: datas,
							type: 'bar',
							stack: 'Total',
							// barMaxWidth: "30", //设置每根柱条最大宽度为50
							// barMinHeight: "0", //设置每根柱条最小高度为50
							// barGap: '10%',

							itemStyle: {
								barBorderRadius: [0, 0, 0, 0], // （顺时针左上，右上，右下，左下）
							},
							color: 'rgba(38, 212, 255, 1)',
							label: {
								show: true, // 显示标签
								position: ['0%', -3],
								width: 30,
								height: 4,
								borderRadius: 0,
								color: 'rgba(0,0,0,0)',
								backgroundColor: 'rgba(38, 212, 255, 1)',
								// shadowBlur: 6,
								// shadowColor: 'rgba(38, 212, 255, 1)',
							},

						},
						]
					});
					window.addEventListener(
						'resize',
						() => {
							setTimeout(() => {
								chartContainer.resize()
							}, 100)
						},
						false,
					)
				},


				// 患者等待时长下钻分析
				dayPatientWaitingTimeRangeCountInfo() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayPatientWaitingTimeRangeCountInfoSelectDate';

					// const url = 'http://172.19.44.5:80/oriot_op/api/hs/dayPatientWaitingTimeRangeCountInfo';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};
					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++患者等待时长下钻分析+++++++" + self.nowselect);
								console.log(rep.data);
								if (rep.code == '1') {
									self.averageWaitingPatientsTable = rep.data;
									if (rep.data.length === 0) {
										self.averageWaitingPatientsTableIsData = false;
									}
								}

							}
						},
						error(rep) {
							console.log(rep + "患者等待时长下钻分析信息获取失败");
						}
					})
				},

				// 连台衔接时长下钻分析
				dayContinuousConnectionTimeRangeCountInfo() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayContinuousConnectionTimeRangeCountInfoSelectDate';
					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++连台衔接时长下钻分析+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.connectionAverageTimeTable = rep.data;
									if (rep.data.length === 0) {
										self.connectionAverageTimeTableIsData = false;
									}
								}
							}

							console.log(self.connectionAverageTimeTable);
						},
						error(rep) {
							console.log(rep + "连台衔接时长下钻分析信息获取失败");
						}
					})
				},

				// 麻醉衔接时长下钻分析
				dayAnesthesiaConnectionTimeRangeCountInfo() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayAnesthesiaConnectionTimeRangeCountInfoSelectDate';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++麻醉衔接时长下钻分析+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.averageAnesthesiaTransitionTimeTable = rep.data;
									if (rep.data.length === 0) {
										self.averageAnesthesiaTransitionTimeTableIsData = false;
									}

								}
							}
						},
						error(rep) {
							console.log(rep + "麻醉衔接时长下钻分析信息获取失败");
						}
					})
				},

				// 手术衔接时长下钻分析
				dayOperationConnectionTimeRangeCountInfo() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayOperationConnectionTimeRangeCountInfoSelectDate';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						date: this.valueDate,
					};

					$.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++手术衔接时长下钻分析+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.SurgicalConnectionAverageTimeTable = rep.data;
									if (rep.data.length === 0) {
										self.SurgicalConnectionAverageTimeTableIsData = false;
									}
								}
							}
						},
						error(rep) {
							console.log(rep + "手术衔接时长下钻分析信息获取失败");
						}
					})
				},

				// 导出接口
				outPutStatisticsInfo(dateBegin, dateEnd) {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/outPutStatisticsInfo';
					let self = this;
					const params = $.param({
						surgicalNumber: this.surgicalNumber,
						dateBegin: dateBegin,
						dateEnd: dateEnd,
					});
					const fullUrl = `${url}?${params}`;

					return new Promise((resolve, reject) => {
						$.ajax({
							url: fullUrl,
							type: 'get',
							success(res) {
								if (res.code == '1') {
									console.log("+++++获取导出数据信息++++++++");
									console.log(res);
									self.infoOutputList = res.data;
									resolve();
								} else {
									reject(new Error(`请求失败，code: ${res.code}`)); // 请求失败
								}
							},
							error(err) {
								console.log('导出数据接口请求失败');
								reject(err); // 请求错误，调用 reject
							},
						});
					});
				},

				// SZC单独导出接口
				exportDataTST(dateBegin, dateEnd) {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/exportDataTST2?surgicalNumber=' + this.surgicalNumber;
					let self = this;
					return new Promise((resolve, reject) => {
						$.ajax({
							url: url,
							type: 'POST',
							contentType: 'application/x-www-form-urlencoded',
							data: {
								operRoom: null,
								dateTime_gte: dateBegin,
								dateTime_lte: dateEnd,
								inpatientNumber: null,
								pageNo: 1,
								pageSize: null,
								orderBy: null,
							},
							xhrFields: {
								withCredentials: true,
							},
							success(res) {
								if (res.code == '1') {
									console.log("+++++获取导出数据信息++++++++");
									console.log(res);
									self.infoOutputListSZC = res;
									resolve();
								} else {
									reject(new Error(`请求失败，code: ${res.code}`)); // 请求失败

								}

							},
							error(err) {
								console.log('导出数据接口请求失败');
								reject(err); // 请求错误，调用 reject
							},
						});
					});
				},

				// 患者等待时长下钻信息导出
				dayPatientWaitingTimeRangeCountInfoOutPut() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayPatientWaitingTimeRangeCountInfoOutPut';

					// const url = 'http://172.19.44.5:80/oriot_op/api/hs/dayPatientWaitingTimeRangeCountInfoOutPut';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						dateType: this.nowselect,
						date: this.nowselect,
					};
					return $.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++患者等待时长下钻信息导出+++++++" + self.nowselect);
								console.log(rep.data);
								if (rep.code == '1') {
									self.infoOutputList = rep.data;
								}
							}
						},
						error(rep) {
							console.log(rep + "患者等待时长下钻信息导出 信息获取失败");
						}
					})
				},
				// 连台衔接时长下钻信息导出
				dayContinuousConnectionTimeRangeCountInfoOutPut() {
					const url = this.httpUrl + '/oriot_op/api/comprehensiveSituationMap/dayContinuousConnectionTimeRangeCountInfoOutPut';

					let self = this;
					const requestData = {

						surgicalNumber: this.surgicalNumber,


						dateType: this.nowselect,
						date: this.nowselect,
					};
					return $.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++连台衔接时长下钻信息导出+++++++" + self.nowselect);
								console.log(rep.data);
								if (rep.code == '1') {
									self.infoOutputList = rep.data;
								}
							}
						},
						error(rep) {
							console.log(rep + "连台衔接时长下钻信息导出信息获取失败");
						}
					})
				},
				// 麻醉衔接时长下钻信息导出
				dayAnesthesiaConnectionTimeRangeCountInfoOutPut() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayAnesthesiaConnectionTimeRangeCountInfoOutPut';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						dateType: this.nowselect,
						date: this.nowselect,
					};

					return $.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++麻醉衔接时长下钻信息导出+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.infoOutputList = rep.data;

								}
							}
						},
						error(rep) {
							console.log(rep + "麻醉衔接时长下钻信息导出信息获取失败");
						}
					})
				},
				// 手术衔接时长下钻信息导出
				dayOperationConnectionTimeRangeCountInfoOutPut() {
					const url = this.httpUrl +
						'/oriot_op/api/comprehensiveSituationMap/dayOperationConnectionTimeRangeCountInfoOutPut';

					let self = this;
					const requestData = {
						surgicalNumber: this.surgicalNumber,
						dateType: this.nowselect,
						date: this.nowselect,
					};

					return $.ajax({
						url,
						type: 'post',
						dataType: 'json',
						data: JSON.stringify(requestData),
						cache: false,
						// 告诉jQuery不要去处理发送的数据
						processData: false,
						// 告诉jQuery不要去设置Content-Type请求头
						contentType: false,
						success(rep) {
							if (rep.data) {
								console.log("+++++手术衔接时长下钻信息导出+++++++" + self.nowselect);
								console.log(rep);
								if (rep.code == '1') {
									self.infoOutputList = rep.data;
								}
							}
						},
						error(rep) {
							console.log(rep + "手术衔接时长下钻信息导出信息获取失败");
						}
					})
				},




				// 下 表格
				// 表格数据未获取到时, 默认展示 --
				defaultFormatter(row, column, cellValue, index) {
					return cellValue === null || cellValue === "" ? '--' : cellValue;
				},

				// 根据列属性和当前表格名称返回相应的标题
				getColumnLabel(prop) {
					const labels = {
						averageWaitingPatientsTable: {
							intTime: '患者等待'
						},
						connectionAverageTimeTable: {
							intTime: '连台衔接'
						},
						averageAnesthesiaTransitionTimeTable: {
							intTime: '麻醉衔接'
						},
						SurgicalConnectionAverageTimeTable: {
							intTime: '手术衔接'
						}
					};
					return labels[this.nowSelectTable]?.[prop] || prop;
				},

				/*getSpanArr(data) {
					for (var i = 0; i < data.length; i++) {
						if (i === 0) {
							this.spanArr.push(1);
							this.pos = 0
						} else {
							if (data[i].data1 === data[i - 1].data1) {
								this.spanArr[this.pos] += 1;
								this.spanArr.push(0);
							} else {
								this.spanArr.push(1);
								this.pos = i;
							}
						}
					}
				},
				*/

				// 合并单元格的函数
				/*cellMerge({ row, column, rowIndex, columnIndex }) {
					if (columnIndex === 0) { // 合并第一列
						const _row = this.spanArr[rowIndex];
						const _col = _row > 0 ? 1 : 0;
						return {
							rowspan: _row,
							colspan: _col
						}
					}
				},
				*/

				// 设置表格行背景颜色
				tableRowClassName({ rowIndex }) {
					const config = this.spanArr;

					if (rowIndex === 0) {
						return 'bg-color-1';
					}

					const currentValue = config[rowIndex]; // 获取当前值
					const prevRowColor = this.tableRowClassName({ rowIndex: rowIndex - 1 });// 获取当前值和上一行的颜色

					// 如果当前值为0，保持和上一行相同的颜色 否则使用不同的颜色
					if (currentValue === 0) {
						return prevRowColor;
					} else {
						return prevRowColor === 'bg-color-1' ? 'bg-color-2' : 'bg-color-1';
					}
					// return 'bg-color-1';

				},

				// 设置单元格样式，列样式
				cellStyle({ row, column, rowIndex, columnIndex }) {
					// 基础样式
					const baseStyle = {
						padding: '0px',
						color: '#fff',
					};

					// 高亮样式（原 baseStyle2）
					const highlightStyle = {
						padding: '0px',
						color: '#00E4FF',
					};

					// 未绑卡的时间列样式
					const unboundTimeStyle = {
						padding: '0px',
						color: '#FF0000', // 红色
					};

					// 定义需要变色的时间列（根据实际列prop调整）
					const timeProps = [
						'intTime',        // 患者等待
						'inBufferTime',   // 患者到达
						'inRoomTime',     // 入手术室
						'anStartTime',    // 麻醉开始
						'operStartTime',  // 手术开始
						'operEndTime',    // 手术结束
						'anEndTime',      // 麻醉结束
						'outRoomTime',    // 出手术室
						'inPACUTime',     // 入PACU
						'outPACUTime',    // 出PACU
					];

					// 初始化样式为基础样式
					let style = { ...baseStyle };

					// 1. 处理未绑卡的时间列（优先级最高） 不是绑定过状态变红，其他（null，""等情况正常
					if (row.isBand == undefined || row.isBand == 'Y') {
						// 绑卡状态：正常展示逻辑
					} else {

						// 执行未绑卡的调整逻辑
						if (this.nowSelectTable === 'averageWaitingPatientsTable') { //1
							const timeColumnIndices = [0, 9, 10, 15, 16, 17];
							if (timeColumnIndices.includes(columnIndex)) {
								style = { ...unboundTimeStyle };
							}
						} else if (this.nowSelectTable === 'connectionAverageTimeTable') {
							const timeColumnIndices = [0, 9, 10, 11, 16, 17, 18];
							if (timeColumnIndices.includes(columnIndex)) {
								style = { ...unboundTimeStyle };
							}
						} else if (this.nowSelectTable === 'averageAnesthesiaTransitionTimeTable') {
							const timeColumnIndices = [0, 9, 10, 11, 16, 17, 18];
							if (timeColumnIndices.includes(columnIndex)) {
								style = { ...unboundTimeStyle };
							}
						} else if (this.nowSelectTable === 'SurgicalConnectionAverageTimeTable') {
							const timeColumnIndices = [0, 9, 10, 11, 16, 17, 18];
							if (timeColumnIndices.includes(columnIndex)) {
								style = { ...unboundTimeStyle };
							}
						}
					}

					// 2. 处理不同表格的高亮列
					/* else {
						if (this.nowSelectTable === 'averageWaitingPatientsTable') {
							if (columnIndex === 9 || columnIndex === 10) { // 患者到达、入手术室
								style = { ...highlightStyle };
							}
						} else if (this.nowSelectTable === 'connectionAverageTimeTable') {
							if (columnIndex === 10 || columnIndex === 11) { // 入手术室、麻醉开始
								style = { ...highlightStyle };
							}
						} else if (this.nowSelectTable === 'averageAnesthesiaTransitionTimeTable') {
							if (columnIndex === 11 || columnIndex === 12) { // 麻醉开始、手术开始
								style = { ...highlightStyle };
							}
						} else if (this.nowSelectTable === 'SurgicalConnectionAverageTimeTable') {
							if (columnIndex === 12 || columnIndex === 13) { // 手术开始、手术结束
								style = { ...highlightStyle };
							}
						}
					} */

					return style;
				},

				// 右下角 返回上一级
				toindex() {
					const url = `index.html?surgicalNumber=${encodeURIComponent(this.surgicalNumber)}`;
					window.location.href = url;
				},





			},

			beforeDestroy() {
				if (this.echartsInstance) {
					this.echartsInstance.dispose();
				}
				if (this.echartsInstance2) {
					this.echartsInstance2.dispose();
				}

				// 组件销毁前清除定时器
				// this.stopAutoSwitch();
				this.stopAutoSwitch2()

			},


			setColorUnBand() { }

		})
	</script>

	<style type="text/css">
		.el-input__inner {
			background-color: black !important;
		}

		/* 选中展示的日期文字位置 */
		.el-input--suffix .el-input__inner {
			padding: 0.2rem;
			background-color: black !important;
		}



		.scrolling-content {
			white-space: nowrap;
			/* overflow: hidden; */
			/* text-overflow: ellipsis; */
			display: inline-block;
			will-change: transform;
			animation: scroll-left 20s linear infinite;
		}

		@keyframes scroll-left {
			0% {
				transform: translateX(0%);
			}

			100% {
				transform: translateX(-100%);
			}
		}

		/* 左上日历 日期调节 */
		.el-icon-d-arrow-left {
			color: transparent;
			background-image: url('images/calendar1.png');
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			content: '';
		}

		.el-icon-arrow-left {
			color: transparent;
			background-image: url('images/calendar2.png');
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			content: '';
		}

		.el-icon-arrow-right {
			color: transparent;
			background-image: url('images/calendar3.png');
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			content: '';
		}

		.el-icon-d-arrow-right {
			color: transparent;
			background-image: url('images/calendar4.png');
			background-size: contain;
			background-repeat: no-repeat;
			display: inline-block;
			content: '';
		}


		.el-input__icon {
			display: none !important;
			width: 0rem !important;
		}

		.el-input__icon.el-icon-date:before {
			display: none !important;
			width: 0rem !important;
		}

		/* 左上日历 */
		.left-top-DatePicker {
			margin-bottom: .2rem;

			.left-top-DatePicker .el-icon-arrow-left {
				color: transparent;
				background-image: url('images/calendar2.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				content: '';
			}

			/* 右侧日历图标位置 */
			.el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
				width: 1.85rem;
				height: .4rem;
			}

			/* 选中展示的日期文字样式 */
			/deep/ .el-input__inner {
				width: 1.85rem;
				height: .4rem;
				background-color: black !important;
				border-radius: 4px;
				border: .01rem solid #6D7CAB;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: .19rem;
				color: #B0B8CD;
				line-height: .19rem;
				text-align: left;
				font-style: normal;
				text-transform: none;
			}

			/* 选中展示的日期文字位置 */
			.el-input--suffix .el-input__inner {
				padding: 0.2rem;
				background-color: black !important;
			}

			/* 默认在左侧显示的图表不显示 */
			.el-input__prefix {
				display: none;
				width: 0px;
			}

			.el-input__icon {
				line-height: .4rem;
			}

			.el-input__icon.el-icon-date:before {
				display: none;
				width: 0rem;
			}

		}

		.elDatePicker.el-picker-panel {
			border-radius: .1rem;
			position: relative;
		}

		/* 展开选择框样式 */
		.elDatePicker .el-picker-panel {
			border-radius: .1rem;
			position: relative;

			.el-picker-panel__body {
				background: #1E1F25 !important;
				border-radius: .1rem;
				border: .01rem solid rgba(176, 184, 205, 0.3);
				width: 100%;
			}

			.el-date-table {
				background-color: #1E1F25;
				/* 当月月份字体样式 */
				color: #B0B8CD;

				/* 前一月 后一月样式 */
				td.next-month,
				td.prev-month {
					color: rgba(176, 184, 205, 0.3);
				}

				/* 不可选择的日期样式 */
				td.disabled div {
					background-color: #1E1F25;
					color: rgba(176, 184, 205, 0.3);
				}
			}

			/* 年月份左右调节图标 */
			.el-picker-panel__icon-btn {
				display: none;
			}

			/* 年月份调节按钮 */
			.el-date-picker__header {
				position: absolute;
				top: .1rem;
				left: .25rem;
				margin: 0px;
			}

			/* 标题年月份调节按钮显示样式 */
			.el-date-picker__header-label {
				background: rgba(176, 184, 205, 0.06);
				border-radius: .07rem;
				border: .01rem solid rgba(176, 184, 205, 0.3);
				color: #B0B8CD;
				/* font-size: .15rem; */
				margin-right: .1rem;
				position: relative;
				padding: .05rem .5rem .05rem .05rem;
			}

			.el-date-picker__header-label::after {
				content: '';
				position: absolute;
				right: .1rem;
				top: 50%;
				transform: translateY(-50%);
				color: #B0B8CD;
				width: .12rem;
				height: .12rem;
				background-image: url('images/Polygon1.png');
				background-size: contain;
				background-repeat: no-repeat;
			}

			/* 星期显示样式 */
			.el-date-table th {
				color: #B0B8CD;
				padding: 0px;
				background: rgba(176, 184, 205, 0.1);
				border-bottom: none;
			}

			/* 星期一区域 */
			.el-date-table th:first-child {
				border-radius: 10px 0px 0px 10px;
			}

			/* 星期日区域 */
			.el-date-table th:last-child {
				border-radius: 0px 10px 10px 0px;
			}


			/* 选中日期样式 */
			.available.current {
				width: .36rem;
				height: .36rem;
			}

			.el-date-table td.current:not(.disabled) span {
				Background: #3BC8CF;
				border-radius: .1rem;
				color: #000;
			}

			.el-picker-panel__content {
				margin-top: .6rem;
				background: rgba(176, 184, 205, 0.06);
				border-radius: .1rem;
			}


			/* 年份选择样式 */
			.el-year-table {
				background-color: #1E1F25;
			}

			.el-year-table td.disabled .cell {
				background-color: #1E1F25;
				color: rgba(176, 184, 205, 0.3);
			}

			/* 月份选择样式 */
			.el-month-table {
				background-color: #1E1F25;
			}

			.el-month-table td.disabled .cell {
				background-color: #1E1F25;
				color: rgba(176, 184, 205, 0.3);
			}

		}

		/* 右上日历 */
		.right-top-DatePicker {

			margin-top: .1rem;

			/* 左侧的图标不显示 */
			.el-date-editor .el-range__icon {
				display: none;
				width: 0rem;
			}

			/* 日期范围区域 */
			.el-input__inner {
				background-color: #1E1F25;
				border: .01rem solid #3BC8CF;
				width: 3.5rem;
				height: .4rem;
				padding-left: .09rem;
			}

			.el-date-editor .el-range-input {
				font-weight: 400;
				font-size: .19rem;
				color: rgba(176, 184, 205, 1);
				line-height: .4rem;
				width: 1.2rem;
			}

			.el-date-editor .el-range-separator {
				font-weight: 400;
				font-size: .19rem;
				color: #B0B8CD;
				line-height: .27rem;
				margin-right: .1rem;
			}

			/* 清空按钮 */
			.el-date-editor .el-range__close-icon {
				padding-left: .3rem;
				width: .17rem;
				height: .17rem;
				line-height: .17rem;
				background-image: url('images/quxiao.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
			}

			/* 右侧的图表不显示 */
			.el-icon-date:before {
				display: none;
				width: 0rem;
			}

		}


		.el-popper .popper__arrow {
			display: none;
		}

		/* 日历整体区域 */
		.elDatesPicker.el-picker-panel {
			width: 7rem;
			height: 3.38rem;
			background: rgba(176, 184, 205, 0.3);
			border-radius: .1rem;
			border: .01rem solid rgba(176, 184, 205, 0.3);
		}

		.el-date-range-picker .el-picker-panel__body {
			display: flex;
			justify-content: left;
		}

		.elDatesPicker {
			height: 3.38rem;

			/* 年月左右调节箭头 */
			.el-icon-d-arrow-left:before {
				color: transparent;
				background-image: url('images/calendar1.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				width: .15rem;
				height: .15rem;
				content: '';
			}

			.el-icon-d-arrow-right:before {
				color: transparent;
				background-image: url('images/calendar4.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				width: .15rem;
				height: .15rem;
				content: '';
			}

			.el-picker-panel__icon-btn.el-icon-arrow-left {
				color: transparent;
				background-image: url('images/calendar2.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				width: .17rem;
				height: .17rem;
				content: '';
			}

			.el-picker-panel__icon-btn.el-icon-arrow-right {
				color: transparent;
				background-image: url('images/calendar3.png');
				background-size: contain;
				background-repeat: no-repeat;
				display: inline-block;
				width: .17rem;
				height: .17rem;
				content: '';
			}

			.el-date-range-picker__header {
				height: .5rem;
				color: #B0B8CD;

				div {
					padding-left: .3rem;
					font-size: .15rem;
					display: flex;
					font-weight: 400;
				}
			}

			.el-date-range-picker__content.is-left {
				border-right: 0px;
			}

			.el-date-table td {
				padding: 0rem;

			}

			.el-picker-panel {
				width: 7rem;
				height: 3.38rem;
				border-radius: .1rem;
				border: 0px solid rgba(176, 184, 205, 0.3);
				/* background-color: transparent !important; */
			}

			.el-picker-panel__content {
				background-color: #1E1F25;
				border-radius: .1rem;
				width: 3.49rem;
				padding: 0 .1rem;

			}

			/* 当月月份字体样式 */
			.el-date-table {
				color: #B0B8CD;
				font-size: .15rem;
			}

			/* 星期显示样式 */
			.el-date-table th {
				color: #B0B8CD;
				padding: 0rem;
				background: rgba(176, 184, 205, 0.1);
				border-bottom: none;
				font-size: .15rem;
				line-height: .35rem;
			}

			/* 星期一区域 */
			.el-date-table th:first-child {
				border-radius: .1rem 0rem 0rem .1rem;
			}

			/* 星期日区域 */
			.el-date-table th:last-child {
				border-radius: 0rem .1rem .1rem 0rem;
			}

			td {
				padding: 0px;
				height: .42rem;
			}

			td div {
				height: .35rem;
			}

			td div span {
				height: .35rem;
			}

			/* 不可选择的日期样式 */
			td.disabled div {
				background-color: #1E1F25;
				color: rgba(176, 184, 205, 0.3);
				padding: 0px;
			}

			td.available div {
				background-color: #1E1F25;
				padding: 0px;
			}

			td.next-month div {
				background-color: #1E1F25;
				padding: 0px;
			}

			td.prev-month div {
				background-color: #1E1F25;
				padding: 0px;
				margin: auto;
			}

			/* 选中的开始日期 结束日期样式 */
			.el-date-table td.end-date span,
			.el-date-table td.start-date span {
				background: #3BC8CF;
				height: .35rem;
				width: .35rem;
				border-radius: .1rem;
				color: #000;
			}

			/* 选中的开始日期 结束日期 区间 样式 */
			.el-date-table td.in-range div,
			.el-date-table td.in-range div:hover,
			.el-date-table.is-week-mode .el-date-table__row.current div,
			.el-date-table.is-week-mode .el-date-table__row:hover div {
				background: #2B484F;
			}

			td.available.in-range {
				border: .1rem;
				background: #2B484F;
			}

			td.available.in-range.start-date {
				border-radius: .1rem 0 0 .1rem;
				background: #2B484F;
			}

			td.available.in-range.end-date {
				border-radius: 0 .1rem .1rem 0;
				background: #2B484F;
			}

		}



		/* table */
		.el-table::before {
			height: 0px !important;
		}

		.el-table__fixed::before {
			background-color: #000 !important;
		}

		.el-table .bg-color-1 {
			background: #121215;
		}

		.el-table .bg-color-2 {
			background: #232529;
		}

		/* 鼠标悬停时 表格行颜色变化 */
		.el-table__body tr:hover>td {
			background-color: #3C4254 !important;
		}

		/* 表头行样式 */
		.elHeaderClass {
			background: linear-gradient(90deg, #002640 0%, #062D3F 70%, #0F383F 100%) !important;
		}

		/* 表头单元格样式 */
		.elHeaderCellClass {
			color: #fff;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: .15rem;
			font-style: normal;
			text-transform: none;
			border: .01rem solid #3C4254;
			border-bottom: 0px !important;
		}

		.el-table th.el-table__cell {
			/* background: #062D3F !important; */
			background-color: transparent;
		}

		/* 单元格内容居中 */
		.el-table .cell {
			text-align: center;
		}

		.el-table__empty-text {
			position: absolute !important;
			left: 5rem;
		}


		.columnClass {
			/* background: #232529; */
			/* color: #E5E6ED; */
			border-bottom: 0px !important;
			border: .01rem solid #3C4254;
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: .15rem;
			font-style: normal;
			text-transform: none;

			white-space: nowrap;
			overflow-x: auto;
			overflow-y: hidden;
			text-overflow: ellipsis;
		}

		/* 表头数据最右侧边框 */
		.el-table__header-wrapper th:nth-last-of-type(2) {
			border-right: none;
		}

		/* 列表数据最右侧边框 */
		.el-table--enable-row-transition .el-table__body td.el-table__cell {
			border-right: none;
		}


		/* 最外层进度条样式 */
		::-webkit-scrollbar {
			/* 整体进度条区域 */
			width: 6px;
			height: 8px;
			background-color: #121215;
			display: none;
		}

		::-webkit-scrollbar-thumb {
			/* 滚动条背景 */
			box-shadow: inset 0 0 6px rgb(18, 18, 21);
			-webkit-box-shadow: inset 0 0 6px rgb(18, 18, 21);
			background-color: #121215;
			border-radius: .2rem;
			display: none;
		}

		::-webkit-scrollbar-track {
			/* 滚动条 */
			box-shadow: inset 0 0 5px rgb(18, 18, 21);
			border-radius: 3px;
			background-color: #121215;
			display: none;
		}

		.loadbox2 {
			position: absolute;
			width: 1.7rem;
			height: .9rem;
			background-color: #35363B;
			border-radius: .15rem;
			color: #fefefe;
			left: 50%;
			top: 45%;
			transform: translate(-50%, -50%);
			z-index: 1000;
			font-size: .25rem;
			display: flex;
			align-items: center;
			/* 新增属性，实现水平居中 */
			justify-content: center;
		}
	</style>
</body>

</html>